<template>
  <!--登录-->
  <div class="wrap">
    <div class="tdbModule loginPage">
      <div class="registerTitle">用户登录</div>
      <div class="registerCont">
        <ul>
          <li>
            <span class="dis"></span>
            <input v-model="userInfo.userType" type="radio" value="1" />
            投资人
            <input v-model="userInfo.userType" type="radio" value="2" />
            借款人
          </li>
          <li>
            <span class="dis">手机号：</span>
            <input class="input" v-model="userInfo.mobile" />
          </li>

          <li>
            <span class="dis">密码：</span>
            <input class="input" v-model="userInfo.password" type="password" />
          </li>
          <li class="btn">
            <button @click="login()" :class="{ disabled: !isValid }">
              立即登录
            </button>
          </li>
        </ul>
        <!-- 更多登录方式 -->
        <div class="more-sign">
          <h6>社交帐号登录</h6>
          <ul>
            <li>
              <a
                id="weixin"
                class="weixin"
                href="http://localhost:8160/api/wx/login"
                ><i class="iconfont icon-weixin"
              /></a>
            </li>
            <li>
              <a id="qq" class="qq" target="_blank" href="#"
                ><i class="iconfont icon-qq"
              /></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "~/assets/css/register.css";
import cookie from "js-cookie";

export default {
  data() {
    return {
      userInfo: {
        userType: 1,
      },
      isValid: true, //表单校验是否成功
    };
  },

  methods: {
    //登录
    login() {
      this.$axios({
        url: "/api/core/userInfo/login",
        method: "POST",
        data: this.userInfo,
      }).then((r) => {
        //http://192.168.1.170/api/core/userInfo/login'
        //前端访问出现跨域是的解决步骤：
        //1、判断请求地址是否能正确提交到服务器: nginx、nginx反向代理、服务器资源地址
        //2、查看前端请求方式和接口是否一致
        //3、判断前端提交的参数和后端接口要求的必须的参数是否一致
        //4、写完接口服务器需要重启
        //r.data获取响应报文的体 也就是R对象
        // r.data.data //获取R对象的data map
        console.log(r.data.data.token);
        //获取到登录成功的token 在其他多个页面中要使用
        //可以使用浏览器的缓存共享数据：将token存到浏览器的localStorage或者cookie中缓存
        // 其他页面可以获取token解析出用户的信息展示到页面中
        localStorage.setItem("srb-token", r.data.data.token);
        this.$message.success("登录成功,正在跳转到首页");
        setTimeout(() => {
          //this.$router.push("/");
          window.location = "/";
        }, 1500);
      });
    },
  },
};
</script>
<style>
.more-sign {
  margin-top: 20px;
  margin-left: 300px;
}

.more-sign h6 {
  position: relative;
  margin: 0 0 10px;
  font-size: 12px;
  color: #b5b5b5;
}

.more-sign h6:after,
.more-sign h6:before {
  content: "";
  border-top: 1px solid #b5b5b5;
  display: block;
  position: absolute;
  width: 60px;
  top: 5px;
}
.more-sign h6:before {
  left: 35px;
}

.more-sign h6:after {
  right: 30px;
}
.more-sign h6:after,
.more-sign h6:before {
  content: "";
  border-top: 1px solid #b5b5b5;
  display: block;
  position: absolute;
  width: 60px;
  top: 5px;
}

.more-sign ul {
  margin-bottom: 10px;
  list-style: none;
  padding-left: 0;
}

.more-sign ul li {
  margin: 0 5px;
  display: inline-block;
}

.more-sign ul a {
  width: 50px;
  height: 50px;
  line-height: 50px;
  display: block;
}
.more-sign .icon-weixin {
  color: #00bb29;
}
.more-sign .icon-qq {
  color: #498ad5;
}
.more-sign ul i {
  font-size: 28px;
}
.ic-wechat:before {
  content: "\E604";
}
.ic-qq_connect:before {
  content: "\E603";
}
</style>
